import './PeripheralMap.scss'
import { useState, useRef } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { Initialization } from '../../../../Common/Mars3d/InitFunc'

export const PeripheralMapA01 = ({ sceneId, MapOptions, MapSetUp, type }) => {
    const MapBox = useRef()

    const { runAsync: getConfig } = useRequest(Http, { manual: true })
    const { runAsync: getDetail } = useRequest(Http, { manual: true })
    const { runAsync: getLocal } = useRequest(Http, { manual: true })

    const [Center, setCenter] = useState()
    const [Map, setMap] = useState()
    const [Gra, setGra] = useState()

    useMount(() => {
        getConfig({ url: 'getJsonInfoByUuid', data: { uuid: sceneId } }).then(scene => {
            getDetail({ url: 'getJsonInfoByUuid', data: { uuid: `${sceneId}_Detail` } }).then(data => {
                getLocal({ url: 'getNongkenOrganizationLocalList' }).then(res => {
                    const { centerList, defaultCenter } = scene.OthA01
                    setCenter(centerList[defaultCenter].center)
                    const { map, gra } = Initialization(MapBox.current, scene, data)
                    setMap(map)
                    setGra(gra)
                })
            })
        })
    })

    return (
        <div className="PeripheralMapA01">
            <div className="Map" ref={MapBox} />
        </div>
    )
}
